<template>
  <div class="card">
    <a-spin :spinning="loading" style="padding-top: 10px">
      <a-table
        bordered
        :filterMultiple="true"
        :rowSelection="{ onChange: onChanges }"
        :columns="columns"
        :data-source="tableData"
        :rowKey="(record, index) => index"
        :pagination="pagination"
        @change=";(pagination = $event), getDataList()"
      >
        <span slot="image" slot-scope="text">
          <viewer :images="[text]">
            <img
              v-for="(item, index) in text"
              :key="index"
              width="50px"
              height="50px"
              style="margin: 5px"
              :src="item"
              alt=""
            />
          </viewer>
        </span>
        <span slot="type" slot-scope="text">
          <a-tag v-if="text == 1" color="#108ee9">反馈</a-tag>
          <a-tag v-if="text == 2" color="orange">投诉</a-tag>
        </span>
        <span slot="target" slot-scope="text">
          <a-tag v-if="text == 1">客服</a-tag>
          <a-tag v-if="text == 2">代理</a-tag>
          <a-tag v-if="text == 3">其他</a-tag>
        </span>
        <span slot="status" slot-scope="text">
          <a-tag v-if="text == 1" color="#108ee9">已处理</a-tag>
          <a-tag v-else color="orange">未处理</a-tag>
        </span>
        <span slot="caozuo" slot-scope="text, record">
          <a-button type="link" @click="showwritedispose(record)">处理</a-button>
        </span>
        <span slot="result" slot-scope="text, record">
          <a-button type="link" @click="showcheckDispose(record)">查看记录</a-button>
        </span>
      </a-table>
    </a-spin>
    <checkDispose ref="checkDisposes"></checkDispose>
    <writedispose ref="writedisposes" @changes="getDataList"></writedispose>
  </div>
</template>

<script>
import { getFeedbackListApi } from '@/api/brand.js'
import checkDispose from './diogla/checkDispose.vue'
import writedispose from './diogla/writedispose.vue'
export default {
  name: 'feedback',
  components: {
    checkDispose,
    writedispose
  },
  data() {
    return {
      loading: false,
      selectedArrIds: [],
      tableData: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 50
      },
      columns: [
        {
          title: '#',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '姓名',
          dataIndex: 'user_realname',
          align: 'center'
        },
        {
          title: '手机号',
          dataIndex: 'user_phone',
          align: 'center'
        },
        {
          title: '类型',
          dataIndex: 'type',
          align: 'center',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '目标',
          dataIndex: 'target',
          align: 'center',
          scopedSlots: { customRender: 'target' }
        },
        {
          title: '反馈时间',
          dataIndex: 'ctime',
          align: 'center'
        },
        {
          title: '反馈内容',
          dataIndex: 'content',
          align: 'center'
        },
        {
          title: '图片',
          dataIndex: 'images',
          align: 'center',
          scopedSlots: { customRender: 'image' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'caozuo' }
        },
        {
          title: '处理结果',
          align: 'center',
          scopedSlots: { customRender: 'result' }
        }
      ]
    }
  },
  created() {
    this.getDataList()
  },
  computed: {},
  methods: {
    onChanges(selectedRowKeys, selectedRows) {
      console.log(selectedRows)
      selectedRows.forEach(element => {
        this.selectedArrIds.push(element.id)
      })
    },
    showwritedispose(jsons) {
      this.$refs.writedisposes.openewritedispose(jsons)
    },
    showcheckDispose(jsons) {
      this.$refs.checkDisposes.openecheckDispose(jsons)
    },

    async getDataList() {
      this.loading = true
      this.selectedArrIds = []
      try {
        var json = {
          order: 'desc',
          order_by: 'id',
          page: this.pagination.current,
          page_size: this.pagination.pageSize,
          search: {
            brand_id: process.env.VUE_APP_BRAND_ID
          }
        }
        const { data } = await getFeedbackListApi(json)
        this.tableData = data.list
        this.pagination.total = data.total
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  padding: 20px;
  background-color: #fff;
}
</style>
